<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.main_{
				width: 300px;
				height: 177px;
				margin: 0 auto;
				margin-top: 50px;
			}
			table{
				background-color: #f0f0f0;
			}
			td{
				height: 42px;
			}
			#th_{
				background-color: #0098c9;
			}
			#th_ td{
				color: white;
				text-align: center;
			}
			table tr:hover{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="main_">
		<table border="1" cellpadding="0" cellspacing="0" bordercolor="#d0d0d0">
			<tr id="th_">
				<td width="42px"><input type="checkbox" id="all_"/></td>
				<td width="165px">菜名</td>
				<td width="85px">饭店</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check_1"/></</td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check_2"/></</td>
				<td>西红柿炒蛋</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check_3"/></</td>
				<td>酸溜土豆丝</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="check_4"/></</td>
				<td>萝卜干炒黄豆儿</td>
				<td>田老师</td>
			</tr>
		</table>
		</div>
		
		<script>
			var all_=document.getElementById("all_");
			var input_=document.getElementsByTagName("input");
			all_.onclick=function(){
				if(all_.checked){
					for(i=0;i<input_.length;i++){
						input_[i].checked=true;
					}
				}else{
					for(i=0;i<input_.length;i++){
						input_[i].checked=false;
					}
				}
			}
		</script>
	</body>
</html>
